<template>
  <div class="panel_main">
    <div class="top_info"
         v-if="Object.keys(pluginInfo).length && type != 'Plugins'">
      <div class="top_info_left">
        <div class="plugin_name">
          <div class="plugin_name_text"
               v-text="pluginInfo.pluginName"></div>
          <Tag color="green"
               class="plugin_tag"
               v-text="pluginInfo.version"></Tag>
          <transition name="fade">
            <Tooltip content="有新版本"
                     :transfer="true"
                     placement="top"
                     v-if="['Plugins', 'Installed'].indexOf(type) > -1 && needUpgrade.hasOwnProperty(pluginInfo.pid)">
              <div class="plugin_upgrade"
                   :class="{active: upgrading.hasOwnProperty(pluginInfo.pid)}">
                <div class="plugin_upgrade_icon">
                  <svg style="fill: green;">
                    <use xlink:href="#icon-upgrade"></use>
                  </svg>
                </div>

                <span v-text="needUpgrade[pluginInfo.pid].version"></span>
              </div>
            </Tooltip>
          </transition>
        </div>
        <div class="plugin_author">
          开发者:
          <a href="javascript:void(0)"
             v-text="pluginInfo.author"
             style="font-weight: bold;"
             @click="openLink(pluginInfo.homepage, $event)"></a>
        </div>
        <div class="plugin_description"
             v-text="pluginInfo.description"></div>
      </div>
      <div class="top_info_right">
        <div class="append_btn_item"
             v-if="['Plugins', 'Installed'].indexOf(type) > -1 && needUpgrade.hasOwnProperty(pluginInfo.pid)">
          <Tooltip :content="'版本升级至 v' + needUpgrade[pluginInfo.pid].version"
                   :transfer="true"
                   placement="top">
            <Button type="success"
                    size="small"
                    long
                    shape="circle"
                    :loading="upgrading.hasOwnProperty(pluginInfo.pid)"
                    @click="upgradePlugin(needUpgrade[pluginInfo.pid])">
              <span v-if="!upgrading.hasOwnProperty(pluginInfo.pid)">升级</span>
              <span v-else>升级中...</span>
            </Button>
          </Tooltip>
        </div>
        <div class="append_btn_item"
             v-if="pluginInfo.type != 'main'">
          <Button type="error"
                  size="small"
                  long
                  shape="circle"
                  @click="deletePlugin"
                  v-if="['Plugins', 'Installed', 'Package'].indexOf(type) > -1">卸载</Button>
        </div>

      </div>
    </div>
    <div class="main_info">
      <Tabs :name="'tabs-' + type">
        <TabPane v-for="(item, index) in subTabs"
                 :key="index"
                 :tab="'tabs-' + type"
                 :label="item.label">
          <div class="panel_item">
            <component :is="item.name"
                       @reload="pluginReloaded"
                       :type="type"
                       :info="pluginInfo"></component>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import { Button, Tag, Tabs, TabPane, Tooltip } from 'view-design'
import { createNamespacedHelpers, mapState } from 'vuex'
const { mapActions } = createNamespacedHelpers('./store/modules')
export default {
  name: 'PanelMain',
  components: {
    TabKeywords: () => import('./TabKeywords'),
    TabManagement: () => import('./TabManagement'),
    TabDetail: () => import('./TabDetail'),
    Button, Tag, Tabs, TabPane, Tooltip
  },
  props: {
    info: {
      type: Object,
      default () {
        return {
        }
      }
    },
    type: {
      type: String,
      default: ''
    }
  },
  watch: {
    info: {
      immediate: true,
      deep: true,
      handler (val) {
        this.pluginInfo = JSON.parse(JSON.stringify(val))
      }
    }
  },
  data () {
    return {
      pluginInfo: {}
    }
  },
  created () {
    // this.pluginInfo = JSON.parse(JSON.stringify(this.info))
  },
  computed: {
    ...mapState(
      {
        downloading: (state) => state.modulePlugins.downloading,
        upgrading: (state) => state.modulePlugins.upgrading,
        needUpgrade: (state) => state.modulePlugins.needUpgrade,
      }
    ),
    subTabs () {
      if (this.type == 'Installed' || this.type == 'Package') {
        return [
          {
            name: 'TabKeywords',
            label: '搜索关键词'
          },
          {
            name: 'TabDetail',
            label: '详细介绍'
          }
        ]
      } else if (this.type == 'Developer') {
        return [
          {
            name: 'TabManagement',
            label: '管理',
          },
          {
            name: 'TabKeywords',
            label: '搜索关键词'
          },
          {
            name: 'TabDetail',
            label: '详细介绍'
          }
        ]
      } else if (this.type == 'Plugins') {
        return [
          {
            name: 'TabKeywords',
            label: '搜索关键词'
          }
        ]
      } else {
        return []
      }
    }
  },
  methods: {
    upgradePlugin (info) {
      bbtools.send('plugin-upgrade', info)
    },
    openLink (url, event) {
      event.preventDefault()
      bbtools.shell.openExternal(url)
    },
    pluginReloaded (data) {
      this.pluginInfo = JSON.parse(JSON.stringify(data))
    },
    deletePlugin () {
      this.$Modal.confirm({
        title: '确认删除',
        content: '删除后无法恢复，请确认',
        cancelText: '取消',
        okText: '删除',
        onOk: () => {
          if (this.pluginInfo.type === 'normal') {
            bbtools.send('plugin-uninstall', this.pluginInfo)
          } else {
            bbtools.send('plugin-remove', this.pluginInfo)
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import url("../../../themes/index.less");
.panel_main {
  position: absolute;
  left: 200px;
  width: calc(~"100% - 200px");
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .top_info {
    width: 100%;
    // height: 96px;
    padding: 0 15px;
    margin-top: 15px;
    box-sizing: border-box;
    // border-bottom: 1px solid #f8f8f8;
    display: flex;
    flex-direction: row;
    // align-items: center;
    justify-content: space-between;
    &_left {
      width: calc(~"100% - 60px");
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      .plugin_name {
        width: 100%;
        height: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 16px;
        color: @darkTextColor1;
        .plugin_tag {
          margin-left: 4px;
          transform: scale(0.8);
        }
      }

      .plugin_author {
        width: 100%;
        height: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 12px;
        color: @darkTextColor3;
        a {
          margin-left: 8px;
        }
      }
      .plugin_description {
        width: 100%;
        // height: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 12px;
        color: @darkTextColor4;
        line-height: 1.3;
      }
    }
    &_right {
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      .append_btn_item {
        // width: 60px;
        height: 100%;
        margin-left: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .main_info {
    width: 100%;
    // flex: 1;
    height: 100%;
    .panel_item {
      width: 100%;
      height: calc(~"100% - 36px");
      // height: calc(~"100% - 36px - 78px");
    }
  }
}
.plugin_upgrade {
  // width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  &_icon {
    width: 20px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    margin-bottom: 2px;
  }
  span {
    font-size: 12px;
    color: green;
    margin-left: 8px;
  }
}
</style>